<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2017/11/22
  Time: 9:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <c:set var="root" value="${pageContext.request.contextPath}"/>
    <meta http-equiv="Content-Language" content="zh-cn">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <link href="${root}/css3/bootstrap.css" rel="stylesheet" type="text/css" />
    <script src="${root}/js3/bootstrap.js"></script>
    <script src="${root}/js3/jquery-2.1.0.js"></script>
    <link rel="stylesheet" href="${root}/css2/bootstrap.min.css" type="text/css"/>
    <script src="${root}/js2/jquery-1.11.3.min.js" type="text/javascript"></script>
    <script src="${root}/js2/bootstrap.min.js" type="text/javascript"></script>
    <!-- 引入自定义css文件 style.css -->
    <link rel="stylesheet" href="${root}/css2/style.css" type="text/css"/>
    <title>产品列表</title>
    <style type="text/css">
        #biaoti{
            height:24px;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
        }
    </style>
</head>
<body>
<br>
<form id="Form1" name="Form1" action="${root}/user/list.jsp" method="post">
  <table cellSpacing="1" cellPadding="0" width="100%" align="center" bgColor="#f5fafe" border="0">
    <TBODY>
    <tr>
      <td class="ta_01" align="center" bgColor="#afd1f3">
        <strong>商品列表</strong>
      </TD>
    </tr>
    <tr>
      <td class="ta_01" align="right">
        <button type="button" id="add" name="add" value="添加" class="button_add" onclick="addProduct()">
          &#28155;&#21152;
        </button>
      </td>
    </tr>
    <tr>
      <td class="ta_01" align="center" bgColor="#f5fafe">
        <table cellspacing="0" cellpadding="1" rules="all" bordercolor="gray" border="1" id="DataGrid1" style="BORDER-RIGHT: gray 1px solid; BORDER-TOP: gray 1px solid; BORDER-LEFT: gray 1px solid; WIDTH: 100%; WORD-BREAK: break-all; BORDER-BOTTOM: gray 1px solid; BORDER-COLLAPSE: collapse; BACKGROUND-COLOR: #f5fafe; WORD-WRAP: break-word">
          <tr style="FONT-WEIGHT: bold; FONT-SIZE: 12pt; HEIGHT: 25px; BACKGROUND-COLOR: #afd1f3">

            <td align="center" width="18%">
              序号
            </td>

            <td align="center" width="17%">
              商品图片
            </td>

            <td align="center" width="17%">
              商品名称
            </td>

            <td align="center" width="17%">
              商品价格
            </td>

            <td align="center" width="17%">
              库存
            </td>

            <td width="7%" align="center">
              编辑
            </td>

            <td width="7%" align="center">
              删除
            </td>

          </tr>
          <c:forEach items="${productList}" var="p" varStatus="vs">
            <tr onmouseover="this.style.backgroundColor = 'white'" onmouseout="this.style.backgroundColor = '#F5FAFE';">
              <td style="CURSOR: hand; HEIGHT: 22px" align="center"
                  width="18%">
                  ${vs.count}
              </td>
              <td style="CURSOR: hand; HEIGHT: 22px" align="center" width="17%">
                <img width="40" height="45" src="${pageContext.request.contextPath}/static/${p.image}">
              </td>
              <td style="CURSOR: hand; HEIGHT: 22px" align="center" width="17%">
                  ${p.pname}
              </td>
              <td style="CURSOR: hand; HEIGHT: 22px" align="center" width="17%">
                  ${p.price}
              </td>
              <td style="CURSOR: hand; HEIGHT: 22px" align="center" width="17%">
                  ${p.counts}
              </td>
              <td align="center" style="HEIGHT: 22px">
                <a href="${ pageContext.request.contextPath }/manage/editTwoProduct.do?pid=${p.pid}">
                  <img src="${pageContext.request.contextPath}/static/images/8/i_edit.gif" border="0" style="CURSOR: hand">
                </a>
              </td>

              <td align="center" style="HEIGHT: 22px">
                <a href="${ pageContext.request.contextPath }/manage/deleteTwoProduct.do?pid=${p.pid}">
                  <img src="${pageContext.request.contextPath}/static/images/8/i_del.gif" width="16" height="16" border="0" style="CURSOR: hand">
                </a>
              </td>
            </tr>
          </c:forEach>
        </table>
      </td>
    </tr>
    </TBODY>
  </table>
</form>
<nav aria-label="Page navigation" >
  <ul class="pagination" style="margin-left: 35%">
    <c:if test="${page.isFirstPage == true}">
      <li class="disabled">
        <a href="#" aria-label="Previous">
          <span aria-hidden="true">首页</span>
        </a>
      </li>
    </c:if>
    <c:if test="${page.isFirstPage != true}">
      <li>
        <a href="${pageContext.request.contextPath}/manage/displayTwoProduct.do?pageNum=0" aria-label="Previous">
          <span aria-hidden="true">首页</span>
        </a>
      </li>
    </c:if>
    <c:if test="${page.isFirstPage == true}">
      <li class="disabled">
        <a href="#" aria-label="Previous">
          <span aria-hidden="true">上一页</span>
        </a>
      </li>
    </c:if>
    <c:if test="${page.isFirstPage != true}">
      <li>
        <a href="${pageContext.request.contextPath}/manage/displayTwoProduct.do?pageNum=${page.prePage}" aria-label="Previous">
          <span aria-hidden="true">上一页</span>
        </a>
      </li>
    </c:if>
    <c:forEach begin="${page.navigateFirstPage}" end="${page.navigateLastPage}" var="item" step="1">
      <c:if test="${item == page.pageNum}">
        <li class="active">
          <a href="${pageContext.request.contextPath}/manage/displayTwoProduct.do?pageNum=${item}">${item}</a>
        </li>
      </c:if>
      <c:if test="${item != page.pageNum}">
        <li>
          <a href="${pageContext.request.contextPath}/manage/displayTwoProduct.do?pageNum=${item}">${item}</a>
        </li>
      </c:if>
    </c:forEach>
    <c:if test="${page.isLastPage == true}">
      <li class="disabled">
        <a href="#" aria-label="Next">
          <span aria-hidden="true">下一页</span>
        </a>
      </li>
    </c:if>
    <c:if test="${page.isLastPage != true}">
      <li>
        <a href="${pageContext.request.contextPath}/manage/displayTwoProduct.do?pageNum=${page.nextPage}" aria-label="Next">
          <span aria-hidden="true">下一页</span>
        </a>
      </li>
    </c:if>
    <c:if test="${page.isLastPage == true}">
      <li class="disabled">
        <a href="#" aria-label="Next">
          <span aria-hidden="true">尾页</span>
        </a>
      </li>
    </c:if>
    <c:if test="${page.isLastPage != true}">
      <li>
        <a href="${pageContext.request.contextPath}/manage/displayTwoProduct.do?pageNum=${page.pages}" aria-label="Next">
          <span aria-hidden="true">尾页</span>
        </a>
      </li>
    </c:if>
  </ul>
</nav>
</body>
</html>
